import { Component, OnInit, ViewChild } from '@angular/core';
import { UtilService } from '@core/services/util.service';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { DicEditComponent } from '../../dic-manage/dic-edit/dic-edit.component';
import { NzDrawerService, NzMessageService, NzModalService } from 'ng-zorro-antd';
import { MenuEditComponent } from '../menu-edit/menu-edit.component';
import { BtnEditComponent } from '../btn-edit/btn-edit.component';
import { ApiService } from '@core/services/api';
import { _HttpClient } from '@delon/theme';
import { MenuNodeItem, MenuService } from '../menu.service';
import { ACLService } from '@delon/acl';

@Component({
  selector: 'app-menu-list',
  templateUrl: './menu-list.component.html',
  styles: []
})
export class MenuListComponent implements OnInit {
  @ViewChild('st', {static: false})st: TablePageComponent;
  menuNode: MenuNodeItem[];
  addFlag:boolean = this.aclService.canAbility("menu-manage/add");//检查用户按钮权限
  editFlag:boolean =  this.aclService.canAbility("menu-manage/edit");
  delFlag:boolean =  this.aclService.canAbility("menu-manage/delete");
  config: SPage = {
    columns: [
      {
        index: 'id',
        title: '选中',
        type: ColumnType.checkbox
      },
      {
        index: 'menuName',
        title: '菜单名称',
        filter: {
          type: 'string'
        }
      },
      {
        index: 'menuUrl',
        title: '路径',
        filter: {
          type: 'string',
          hideSearch: true
        }
      },
      {
        index: 'parentName',
        title: '上级菜单',
        filter: {
          type: 'string'
        }
      },
      {
        index: 'menuIcon',
        title: '图标',
        filter: {
          type: 'string',
          hideSearch: true
        }
      },
      {
        index: 'menuType',
        title: '类型',
        filter: {
          type: 'select',
          hideSearch: true,
          items: [
            {label: '目录', value: '1'},
            {label: '菜单', value: '2'},
            {label: '按钮', value: '3'}
          ]
        }
      },
      {
        index: 'status',
        title: '状态',
        type: ColumnType.tag,
        tag: {
          false: {text:'停用', color: 'red'},
          true: {text:'启用', color: 'green'},
          3: { text: '进行中', color: 'blue' },
          4: { text: '默认', color: '' },
          5: { text: '警告', color: 'orange' },
        },
        filter: {
          type: 'select',
          items: [
            {label: '启用', value: true},
            {label: '停用', value: false},
          ]
        }
      },
      {
        index: 'remark',
        title: '备注'
      },
    ],
    reqUrl: this.api.menu.page.url,
    editBtn: [
      {title: '编辑', iif: () => this.editFlag },
      // {title: '按钮管理'}
    ]
  };
  selectedData: Array<any>;
  editDic(type: 0 | 1 = 0, param?: object): void {
    const modal = this.modal.create({
      nzTitle: type === 0 ? '新增菜单' : '修改菜单',
      nzContent: MenuEditComponent,
      nzWidth: 800,
      nzComponentParams: {
        type,
        param
      },
      nzFooter: null,
    })
    modal.afterClose.subscribe(res => {
      if (res === 'ok') {
        console.log(res)
        this.st.reload();
      }
    })
  }
  selectChange(e): void {
    this.selectedData = e;
  }
  operate(e): void {
    console.log(e);
    if (e.title === '编辑') {
      this.editDic(1 , e.data)
    } else if (e.title === '按钮管理') {
      this.editBtn(e.data);
    }
  }
  deleteDic(): void {
    if (!this.selectedData || this.selectedData.length === 0) {
      this.msg.warning('请选择数据后操作');
      return;
    }
    this.modal.confirm({
      nzTitle: '您确定要删除这些数据吗',
      nzOnOk: () => {
        const body = [];
        this.selectedData.forEach(item => {
          body.push({id: item.id})
        })
        this.http.put(this.api.menu.delete.url,body).subscribe(res => {
          if (res.status === '200') {
            this.msg.success('删除成功');
            this.st.reload();
          }
        })

      }
    })
  }
  editBtn(e: any): void {
    const drawerRef = this.drawer.create({
      nzTitle: '按钮管理',
      nzContent: BtnEditComponent,
      nzWidth: 500,
      nzContentParams: {
        param: e
      }
    })
  }
  search(e): void {
    this.st.searchData({menuParentId: e.keys[0]})
  }
  constructor(
    private modal: NzModalService,
    private msg: NzMessageService,
    private util: UtilService,
    private drawer: NzDrawerService,
    private api: ApiService,
    private http: _HttpClient,
    private menu: MenuService,
    private aclService: ACLService,
  ) { }
  ngOnInit() {
    this.menu.getMenuList({menuType: '1'}).subscribe(res => {
      if (res.status === '200') {
        res.data.sort((a, b) => {
          return a.menuSortno - b.menuSortno;
        })
        this.menuNode = res.data.map(item => {
          return {key: item.id, title: item.menuName, isLeaf: true};
        })
      }
    })
  }

}
